<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Moshi Player ver 1.0</title>
<link rel="StyleSheet" href="css/styles.css" type="text/css" media="screen">
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/sugar-1.2.4.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript">
	$.support.cors = true;
	var videoId = $.urlParam('id');
	
	function getVideoPlayer(videoId){
		if(videoId==undefined || videoId==0){
			alert("id param in url is empty. Please enter a valid youtube video id.");
		}else{

			$("#videoPlayer").text("You need Flash player 8+ and JavaScript enabled to view this video.");
			
			var params = { allowScriptAccess: "always" };
			var atts = { id: "myytplayer" };
			swfobject.embedSWF("http://www.youtube.com/v/"+videoId+"?enablejsapi=1&playerapiid=ytplayer&version=3",
							   "videoPlayer", "640", "360", "8", null, null, params, atts);		   
		}		   
	}
	
	function getVideoInfo(videoId) {
		if(videoId==undefined || videoId==0){
			alert("id param in url is empty. Please enter a valid youtube video id.");
		}else{
			$.ajax({
			  url: "http://gdata.youtube.com/feeds/api/videos/"+videoId+"?v=2&alt=jsonc",
			  dataType: 'json',
			  cache:false,
			  success: function (data) { getVideoPlayer(videoId); showVideoInfo(data); getRelatedVideos(videoId)},
			  error: function(xhr, error, errorThrown){
				var errorResponse = $.parseJSON(xhr.responseText);
				alert("There has been an error: "+((errorResponse==null) ? errorThrown : errorResponse.error.message));
			  }
			});
		}
	}
	
	function showVideoInfo(videoInfo){
		$("#header h1").html(videoInfo.data.title);
		$("#videoDesc").html(videoInfo.data.description);
		$("#videoViews").html(videoInfo.data.viewCount+" Views");
		//$("#videoDuration").html(seconds2time(videoInfo.data.duration));
		$('#videoDate').prepend("Posted "+Date.create('2009-10-25T08:40:23.000Z').format('{Weekday} {Month} {ord}, {year}')+"&nbsp;");
		$("#postedBy").html("by "+videoInfo.data.uploader);
	}
	
	function getRelatedVideos(videoId){
		if(videoId==undefined || videoId==0){
			alert("id param in url is empty. Please enter a valid youtube video id.");
		}else{
			$.ajax({
			  url: "http://gdata.youtube.com/feeds/api/videos/"+videoId+"/related?v=2&alt=jsonc&max-results=5",
			  dataType: 'json',
			  cache:false,
			  success: function (data) { showRelatedVideos(data) },
			  error: function(xhr, error, errorThrown){
				var errorResponse = $.parseJSON(xhr.responseText);
				alert("There has been an error: "+((errorResponse==null) ? errorThrown : errorResponse.error.message));
			  }
			});
		}
	}
	
	function showRelatedVideos(videos){
		$.each(videos.data.items, function(i, val) {
		   content = "<div class=\"videoItem\"><div class=\"borderDiv\"><img src=\""+val.thumbnail.sqDefault+"\"/></div><div class=\"itemContent\"><h3>"+val.title.truncate(20, '...', false)+"</h3><span>"+val.viewCount+" Views</span></div></div>";
		   
		   //<span>"+seconds2time(val.duration)+"</span>
		   
		   $("#relatedVideos").append(content);
		});
	}
	
	$(document).ready(function () {
		
        getVideoInfo(videoId);
		
		$('#relatedVideos').on('hover','div.videoItem', function( event ) {
		if( event.type === 'mouseenter' ){
			$(this).addClass("bgSelected");		  
		}else{
			$(this).removeClass("bgSelected");
		}		
		});
		
    });
			
</script>
</head>
<body>
	<div id="main">
		<div id="container">
			<div id="header"><div id="moshiLogo"></div><h1></h1></div>
			<div id="content">
				<div id="leftColumn">
					<div class="borderDiv"><div id="videoPlayer"></div></div>
					<div id="videoViews"></div>
					<div id="videoDesc"></div>
					<div id="videoDuration"></div>
					<div id="videoDate"><span id="postedBy"></span></div>
				</div>
				<div id="rightColumn">
					<h2>More Videos</h2>
					<div id="relatedVideos"></div>
				</div>
			</div>
			<div class="contentBot"></div>
		</div>
	</div>
</body>
</html>
